<!DOCTYPE html>
<html lang="zh-CN">
  <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
	  <#include "/common/plateform/include/common-base.ftl">
  <title>websocket验证</title>
  <!-- Tell the browser to be responsive to screen width -->
</head>

<!-- Part 一、 以下是body主体内容的模块区域 -->
<body class="hold-transition ${sysColor} sidebar-mini">
<div class="wrapper">

	<!-- top start -->
	<#include "/common/plateform/top.ftl">
	<!-- top end -->

	<!-- left start -->
	<#include "/common/plateform/left-project.ftl">
	<!-- left end-->

  <div class="content-wrapper">
    <!-- Main start -->
	<section class="content">
      <div class="row">

		  <div class="col-xs-9">

			  <div class="box box-solid">
				  <div class="box-header with-border">
					 <h3 class="box-title"><i class="fa fa-cog"></i> 服务端配置</h3>
				  </div>
				<div class="box-body">
					<div class="row">
						<div class="form-group col-sm-12">
							<div class="col-sm-12 form-control-static">服务地址：</div>
							<div class="col-sm-10">
								<input class="form-control" style="font-size: 12px;" type="text" id="server_url" value="ws://39.104.104.181:11006/websocket/test?sysPass=e0cea4bb45e36c115356e46910c354af" placeholder="请配置服务地址"/>
							</div>
							<div class="col-sm-2">
								<button class="btn btn-primary" id="btn_connect">开启连接</button>
							</div>
						</div>
						<div class="form-group col-sm-12">
							<div class="col-sm-12 form-control-static">输入内容：</div>
							<div class="col-sm-12">
								<input id="content_msg" class="form-control clean" placeholder="请输入推送内容" type="text" />
							</div>
						</div>
						<div class="form-group col-sm-12">
							<div class="col-sm-12">
								<button class="btn btn-danger btn-lg" id="btn_send" disabled="disabled">推送内容</button>&nbsp;&nbsp;
								<button class="btn btn-primary btn-lg" id="btn_stop" disabled="disabled">断开连接</button>&nbsp;&nbsp;
							</div>
							<div class="col-sm-12 pt10">
								查看官网API：<a href="javascript:;" onclick="openApi()">插件开发-websocket推送 </a>
							</div>
						</div>
					</div>
				</div>
			 </div>

			  <div class="box box-solid">
				  <div class="box-header with-border">
					 <h3 class="box-title"><i class="fa fa-tv"></i> 控制台</h3>
				  </div>
				  <div class="box-body" style="min-height:100px;">
					  <textarea id="log" readonly="readonly" class="form-control" rows="4" style="font-size:12px;"></textarea>
				  </div>
			  </div>
        </div>

		  <div class="col-xs-3">

			  <div class="box box-solid">
				  <div class="box-header with-border">
					  <h3 class="box-title" id="my_message_tips"><i class="fa fa-user"></i> 客户端</h3>
				  </div>
				  <div class="box-body" style="min-height:460px;font-size:12px;">
					<ul id="my_message" type="circle"></ul>
				  </div>
			  </div>
		  </div>
      </div>

<!-- Part 三、 以下是js模块区域 -->
<script>
var clickMenu = "websocket-list";
var myPage,dataListId,searchFormId;
myPage = 10;//定义列表数据
dataListId = "dataList";//显示列表数据div的id
searchFormId = "searchForm";//搜索表单Id
var defSysEname = strUtil.doNull(strUtil.getLocalStorage("sysEname"), "");
/**
 * 初始化数据字典，id传入#id 返回值Map用法：dictListMap["userType"][rows[i].userType]
 */
var dictListMap = DictUtil.initDictAndDymic();

$(function () {
    $("#btn_connect").attr("disabled",false);
    $("#btn_stop").attr("disabled",true);
    $("#btn_send").attr("disabled",true);
    $("#content_msg").val("");

    if (!window.WebSocket) {
        alert("FATAL: WebSocket not natively supported. This demo will not work!");
    }

    var ws;
    $("#btn_connect").click(function(e) {
        // e.stop();
        var websocketUrl = $("#server_url").val();
        ws = new WebSocket(websocketUrl);
        ws.onopen = function() {
            showLog("[WebSocket#onopen]","success !");
        }
        ws.onmessage = function(e) {
            showLog("[WebSocket#onmessage]","listening message："+e.data);
            console.log(e);
            layer.tips('接收到新消息了', '#my_message_tips', {tips: 2});
//            layer.msg("接收到新消息了！");
            var times = new Date().format("hh:mm:ss.S");
            $("#my_message").append("<li>"+times+"-> "+e.data+"</li>");
        }
        ws.onclose = function() {
            showLog("[WebSocket#onclose]","close !");
        }
        //$("uri", "connect").invoke("disable");
        $("#btn_connect").attr("disabled",true);
        $("#btn_stop").attr("disabled",false);
        $("#btn_send").attr("disabled",false);
    });

    $("#btn_stop").click(function(e) {
        $("#btn_connect").attr("disabled",false);
        $("#btn_stop").attr("disabled",true);
        $("#btn_send").attr("disabled",true);
        $("#content_msg").val("");
		ws.close();
    });


    $("#btn_send").click( function(e) {
        //e.stop();
        if (ws) {
            var textField = $("#content_msg").val();
            if(strUtil.isNull(textField)){
                layer.tips('请输入内容', '#content_msg', {tips: 1});
                return;
			}
            var index_load = layer.msg("消息发送中...");
            ws.send(textField);
            showLog("[WebSocket#onsend]",textField);
            layer.close(index_load);
        }else{
            showLog("[WebSocket#closed]","连接已断开");
        }
    });
	
 });

function showLog(type,content) {
	var times = new Date().format("yyyy-MM-dd hh:mm:ss.S");
    $("#log").append(times+"-> "+type+" "+content+"\n");
}

function openApi() {
    layer.open({
        type: 2,
        title:"IUS快速开发平台",
        shadeClose: false,
        shade: 0.6,
        area: ['80%', '600px'],
        offset: '10px',
        content: "https://www.iussoft.com/wcm/ius/api/2/09.html" //iframe的url
    });
}
</script>
</section>
<!-- Main end -->   
</div>
	<!-- foot start -->
	<#include "/common/plateform/foot.ftl">
	<!-- foot start -->
</div>
<!-- /.content-wrapper -->
</body>
</html>














